import * as React from "react";
import { Collapse } from "./Collapse"; // 引入 Collapse 组件

export function MoreCollapse({ children, title }) {
  const [expandAll, setexpandAllStates] = React.useState(false);

  const toggleCollapse = () => {
    setexpandAllStates((expandAll) => !expandAll); // 切换状态
  };

  return (
    <div>
      <div className="title">
        <span className="more">{title}</span>
        <span className="expand" onClick={toggleCollapse}>
          {expandAll ? "Collapse all" : "Expand all"}
        </span>
      </div>
      {children.map((section, index) => (
        <Collapse
          key={index}
          head={section.props.head}
          title={section.props.title}
          type={section.props.type}
          tagType={section.props.tagType}
          tagContent={section.props.tagContent}
          tagShow={section.props.tagShow}
          arrowHide={section.props.arrowHide}
          borderHide={section.props.borderHide}
          isOpen={expandAll}
          children={section.props.children}
        ></Collapse>
      ))}
      <style jsx>
        {`
          .title {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
          }
          .more {
            font-size: 16px;
            color: var(--color-gray-10);
            font-weight: bold;
          }
          .expand {
            font-size: 12px;
            font-weight: 600;
            color: var(--color-gray-7);
            cursor: pointer;
          }
        `}
      </style>
    </div>
  );
}
